<template>
    <!-- 导航组 -->
    <view class="diy-navBar" :style="'background: ' + itemStyle.background + ';'">
        <view :class="'data-list avg-sm-' + itemStyle.rowsNum">
            <view class="item-nav" v-for="(dataItem, index) in dataList" :key="index">
                <view class="nav-to" @tap.stop.prevent="navigationTo" :data-url="dataItem.linkUrl">
                    <view class="item-image">
                        <image class="image" mode="widthFix" :src="dataItem.imgUrl"></image>
                    </view>
                    <view class="item-text f-28 onelist-hidden" :style="'color: ' + dataItem.color + ';'">{{ dataItem.text }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            dataItem: {
                linkUrl: '',
                imgUrl: '',
                color: '',
                text: ''
            }
        };
    },
    options: {
        addGlobalClass: true
    },
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
        itemIndex: String,
        itemStyle: Object,
        params: Object,
        dataList: Array
    },
    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {
        /**
         * 跳转到指定页面
         */
        navigationTo: function (e) {
            app.navigationTo(e.currentTarget.dataset.url);
        }
    }
};
</script>
<style lang="scss">
/* common.wxss */

/* @import "../../../utils/common.scss"; */

/* 导航组 */

.diy-navBar .data-list::after {
    clear: both;
    content: ' ';
    display: table;
}

.diy-navBar .item-nav {
    float: left;
    margin: 10px 0;
    text-align: center;
}

.diy-navBar .item-nav .item-image {
    margin-bottom: 4px;
    font-size: 0;
}

.diy-navBar .item-nav .item-image .image {
    width: 88rpx;
    height: 88rpx;
}

/* 分列布局 */

.diy-navBar .avg-sm-3 > .item-nav {
    width: 33.33333333%;
}

.diy-navBar .avg-sm-4 > .item-nav {
    width: 25%;
}

.diy-navBar .avg-sm-5 > .item-nav {
    width: 20%;
}
</style>
